<template>
	<div class="m-25 mt-65">
		<div class="normal-box-mod">
			<div class="normal-box-hd clearfix">
				<div class="normal-box-title">
					<div class="decorate-square"></div>
					<h2>社区积分上袋设置</h2>
				</div>
			</div>
			<div class="normal-box-bd">
				<div class="normal-list-page-mod">
					<Card style="margin-bottom: 10px;">
						<div class="normal-list-page-hd clearfix">
							社区名称:
							<Input placeholder="社区名称" class="mr-10" v-model="queryData.name" style="width: 150px" />
							社区ID:
							<Input placeholder="社区ID" class="mr-10" v-model="queryData.comminid" style="width: 150px" />
							<Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
						</div>
					</Card>
					<div class="normal-list-page-hd clearfix">
						<Button type="primary" custom-icon="iconfont icon-fangkuai2" size="small" @click="showCreateModal" class="fr">新建</Button>
					</div>
					<div class="normal-list-page-bd">
						<Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
					</div>
					<div>
						<Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
						 show-elevator @on-change="changePage"></Page>

					</div>
				</div>

				<!--修改-->
				<Modal v-model="modal.lntegralSet.isShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title"
				 @on-ok="postData">
					<Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120">
						<FormItem label="社区ID" prop="comminid">
							<Input placeholder="请输入社区ID" v-model="modal.lntegralSet.formData.comminid" style="width:200px;" disabled="disabled" />
						</FormItem>
						<FormItem label="垃圾袋数目" prop="bagnum">
							<Input placeholder="请输入系统垃圾袋数目" v-model="modal.lntegralSet.formData.bagnum" style="width:200px;" />
						</FormItem>
						<FormItem label="积分" prop="bagintegral">
							<Input placeholder="请输入系统积分" v-model="modal.lntegralSet.formData.bagintegral" number style="width:200px;" />
						</FormItem>
					</Form>
				</Modal>
				<!-- 新建	 -->
				<Modal v-model="modal.lntegralSet.thatShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title"
				 @on-ok="getData" width='750'>
					<Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120">
						<FormItem label="设备所在区域" prop="softPath">
							<Row>
								<Col>
								<queryData @ProvinceData="formdataValue" style="width: 535px"></queryData>
								</Col>
							</Row>
						</FormItem>
						<FormItem label="垃圾袋数目" prop="bagnum">
							<Input placeholder="请输入系统垃圾袋数目" v-model="modal.lntegralSet.formData.bagnum" style="width:200px;" />
						</FormItem>
						<FormItem label="积分" prop="bagintegral">
							<Input placeholder="请输入系统积分" v-model="modal.lntegralSet.formData.bagintegral" style="width:200px;" />
						</FormItem>
					</Form>
				</Modal>
			</div>
		</div>
	</div>
</template>
<script>
	import lntegralSetApi from "@/api/base_sys/lntegralSet.js";
	import moment from "moment";
	import {
		Message
	} from "iview";
	import queryData from "@/view/test/cityTestZj.vue"

	export default {
		name: "lntegralSet",
		components: {
			queryData
		},
		data() {
			return {
				newSbType: {
					cityCascade: {
						data: [{
							id: '',
							name: '请选择'
						}],
						please: '',
						provid: [],
						cityid: [],
						distid: [],
						strt: [],
						commid: [],
						comminid: [],
					}
				},
				// 弹出层数据
				modal: {
					lntegralSet: {
						isShow: false,
						thatShow: false,
						loading: true,
						flog: false,
						type: "create", // create 新建，update 修改
						title: "新建",
						rules: {
							// provid:[
							// 		{
							// 			required:true,
							// 			message:"请选择地区",
							// 			trigger:"blur",
							// 			type:'number'
							// 		}
							// 	],
							// cityid:[
							// 		{
							// 			required:true,
							// 			message:"请选择地区",
							// 			trigger:"blur",
							// 			type:'number'
							// 		}
							// 	],
							// distid:[
							// 		{
							// 			required:true,
							// 			message:"请选择地区",
							// 			trigger:"blur",
							// 			type:'number'
							// 		}
							// 	],
							// strtid:[
							// 		{
							// 			required:true,
							// 			message:"请选择地区",
							// 			trigger:"blur",
							// 			type:'number'
							// 		}
							// 	],
							// softPath:[
							// 		{
							// 			required:true,
							// 			message:"请选择设备所在区域",
							// 			trigger:"blur",
							// 			type:'number'
							// 		}
							// 	],
							bagnum: [{
								required: true,
								message: "请输入垃圾袋数目",
								trigger: "blur",
								pattern: /^[a-z0-9]+$/
							}],
							bagintegral: [{
								required: true,
								message: "请输入积分数量",
								trigger: "blur",
								pattern: /^[a-z0-9]+$/,
							}],


						},
						formData: {
							// id: undefined,
							// name: "",
							// url: "",
							// state: ""
						}
					}
				},
				// 列表
				list: {
					loading: false,
					selections: [],
					// 列表展示数据
					tableData: [],
					// 表格表头
					columns: [
						// 开始自动生成
						{
							title: "社区ID",
							key: "comminid",
							align: "center",
							minWidth: 100
						},
						{
							title: "社区名称",
							key: "name",
							align: "center",
							minWidth: 100
						},
						{
							title: "垃圾袋子数量",
							key: "bagnum",
							align: "center",
							minWidth: 100
						}, {
							title: "积分",
							key: "bagintegral",
							align: "center",
							minWidth: 100
						},

						{
							title: "操作",
							align: "center",
							minWidth: 130,
							render: (h, params) => {
								return h("div", {
									class: "action-group"
								}, [

									h(
										'Tooltip', {
											props: {
												placement: 'left',
												content: '编辑'
											},
											style: {
												cursor: 'pointer'
											}
										},
										[
											h(
												'Button', {
													props: {
														type: 'primary',
														size: 'small'
													},
													style: {
														marginRight: '5px',
														padding: '1px 2px'
													},
													on: {
														click: () => {
															this.showUpdateModal(params.row.comminid);
														}
													}
												},
												[
													h('Icon', {
														props: {
															type: ' iconfont icon-bianjisekuai',
															size: 18
														}
													})
												]
											)
										]
									),

									h(
										'Tooltip', {
											props: {
												placement: 'right',
												content: '删除'
											},
											style: {
												cursor: 'pointer'
											}
										},
										[
											h(
												'Button', {
													props: {
														type: 'error',
														size: 'small'
													},
													style: {
														marginRight: '5px',
														padding: '1px 2px'
													},
													on: {
														click: () => {
															this.delData(params.row.comminid);
														}
													}
												},
												[
													h('Icon', {
														props: {
															type: ' iconfont icon-shanchusekuai',
															size: 18
														}
													})
												]
											)
										]
									)

								]);
							}
						}
					]
				},
				// 页面查询数据
				queryData: {
					limit: 10,
					page: 1,
					totalRecord: 0,
					name: "",
					comminid: ""
				}
			};
		},
		methods: {

			// 获取列表
			getTableData() {
				const that = this;
				that.queryData.totalRecord = undefined;
				lntegralSetApi.getPageList(that.queryData)
					.then(res => {
						that.list.tableData = res.data.list;
						that.queryData.totalRecord = res.data.totalRecord;
						that.queryData.limit = res.data.pageSize;
					})
					.catch(error => {
						Message.error(error);
					});
			},

			// 修改
			postData() {
				const that = this;
				this.$refs["lntegralSetFrom"].validate(valid => {

					if (valid) {
						// 修改
						lntegralSetApi.update(that.modal.lntegralSet.formData)
							.then(res => {
								that.modal.lntegralSet.isShow = false;
								// that.modal.lntegralSet.loading = false;
								if (!res.code) {
									that.getTableData();
									that.$Notice.success({
										title: "保存成功!"
									});
								} else {
									that.$Notice.error({
										title: res.message
									});
								}
							})
							.catch(error => {
								Message.error(error);
							});

					} else {
						that.modal.lntegralSet.loading = false;
						that.$nextTick(() => {
							that.modal.lntegralSet.loading = true;
						});
					}
				});
			},
			getData() {
				if (this.modal.lntegralSet.flog == true) {
					const that = this;
					this.$refs["lntegralSetFrom"].validate(valid => {

						if (valid) {
							lntegralSetApi.add(that.modal.lntegralSet.formData)
								.then(res => {
									that.modal.lntegralSet.thatShow = false;
									// that.modal.lntegralSet.loading = false;
									if (!res.code) {
										that.getTableData();
										that.$Notice.success({
											title: "保存成功!"
										});
									} else {
										that.$Notice.error({
											title: res.message
										});
									}
								})
						} else {
							that.modal.lntegralSet.loading = false;
							that.$nextTick(() => {
								that.modal.lntegralSet.loading = true;
							});
						}
					});
				} else {
					const that = this;
					that.modal.lntegralSet.loading = false;
					that.$nextTick(() => {
						that.modal.lntegralSet.loading = true;
					});
					this.$Message.warning('地址至少要选择到街道才能提交');

				}

			},
			// 删除
			delData(id) {
				this.$Modal.confirm({
					title: "确认删除",
					content: "<p>您确认删除id为 <strong>" +
						id.toString() +
						"</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
					loading: true,
					onOk: () => {
						lntegralSetApi.del(id).then(res => {
							this.$Modal.remove();
							if (!res.code) {
								this.$Notice.success({
									title: "删除成功"
								});
								this.queryData.page = 1;
								this.getTableData();
							} else {
								this.$Notice.error({
									title: res.message
								});
							}
						});
					}
				});
			},

			// 查询
			inQuire() {
				this.queryData.page=1;
				this.getTableData();
			},

			// 全选，不全选
			// selectionChange(args) {
			//   this.list.selections = args;
			// },

			//每页显示记录数变更
			onPageSizeChange(pageSize) {
				this.queryData.limit = pageSize;
				this.getTableData();
			},

			// 换页
			changePage(page) {
				this.queryData.page = page;
				this.getTableData();
			},

			// 显示新建弹窗
			showCreateModal() {

				this.modal.lntegralSet.type = "create";
				this.modal.lntegralSet.title = "新建";
				this.modal.lntegralSet.formData = {};

				// this.$emit('ProvinceData',);

				this.modal.lntegralSet.thatShow = true;

			},

			// 显示修改弹窗
			showUpdateModal(id) {;
				this.modal.lntegralSet.type = "update";
				this.modal.lntegralSet.title = "修改";
				const that = this;
				lntegralSetApi.getDetail(id).then(res => {
						that.modal.lntegralSet.formData = res.data;
						that.modal.lntegralSet.isShow = true;
					})
					.catch(error => {
						Message.error(error);
					});

			},
			formdataValue(formdata) {
				if (formdata.comminid == '') {
					if (formdata.commid == '') {
						if (formdata.strt == '') {
							this.modal.lntegralSet.flog = false;
						} else {
							this.modal.lntegralSet.formData.comminid = formdata.strt;
							this.modal.lntegralSet.flog = true;
						}
					} else {
						this.modal.lntegralSet.formData.comminid = formdata.commid
					}
				} else {
					this.modal.lntegralSet.formData.comminid = formdata.comminid
				}
			}

		},


		created() {
			this.getTableData();
		}
	};
</script>
